<template>
	<div class="loginPage">
		<div class="Obscuration"></div>
		<div class="container">
			<div class='title color-main'>
				校园交友平台
			</div>
			<el-form autocomplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
				style="width: 90%;margin-left: 5%;margin-top: 12%;">
				<el-form-item prop="username">
					<el-input name="username" type="text" v-model="loginForm.username" autocomplete="on"
						placeholder="请输入用户名" maxlength='20'>
						<span slot="prefix">
							<i class="iconfont icon-user"></i>
						</span>
					</el-input>
					<div class="reg-hint" @click="handleRegister">还没有账户？立即<span class="reg-hint-item">注册</span></div>
				</el-form-item>
				<el-form-item prop="password">
					<el-input name="password" type="password" @keyup.enter.native="handleLogin"
						v-model="loginForm.password" autocomplete="on" placeholder="请输入密码" show-password maxlength='16'>
						<span slot="prefix">
							<i class="iconfont icon-psw"></i>
						</span>
					</el-input>
				</el-form-item>
				<el-form-item style="margin-bottom: 20px;text-align: center">
					<el-button style="width: 45%" type="primary" :loading="loading" @click.native.prevent="handleLogin">
						登入</el-button>
				</el-form-item>
			</el-form>
		</div>
		<bottom-content-vue></bottom-content-vue>
	</div>
</template>

<script>
	import BottomContentVue from "@/components/BottomContent.vue"
	import sessionStorage from "@/utils/session.js"
	import socket from "@/socket"
	import {
		getToken,
		setToken,
		removeToken
	} from '@/utils/auth'
	import {
		login
	} from '@/api/user.js'
	import {
		getdate
	} from "@/utils/base.js"
	import {
		debounce
	} from "@/utils/common.js";

	export default {
		name: "userLogin",
		components: {
			BottomContentVue
		},
		data() {
			const validateUsername = (rule, value, callback) => {
				if (value.trim().length < 1) {
					callback(new Error("用户名长度不能小于1位"));
				} else {
					callback();
				}
			};
			const validatePass = (rule, value, callback) => {
				if (value.length < 6) {
					callback(new Error("密码不能小于6位"));
				} else {
					callback();
				}
			};
			return {
				loginForm: {
					username: "",
					password: "",
				},
				loginRules: {
					username: [{
						required: true,
						trigger: "blur",
						validator: validateUsername
					}],
					password: [{
						required: true,
						trigger: "blur",
						validator: validatePass
					}]
				},
				loading: false,
				isText: false, //是否是测试
				nowIP: socket.nowIP,
			}
		},
		mounted() {
			if (document.body.clientWidth < 768) {
				this.$store.commit("SetExecute", false)
			} else {
				this.$store.commit("SetExecute", true)
			}
			sessionStorage.clearSession()
			this.loginForm = {
				...this.loginForm,
				...this.$route.params
			}
		},
		methods: {
			handleLogin: debounce(function() {
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						this.loading = true;
						this.$store.dispatch('actionLogin', this.loginForm).then(res => {
							this.$message({
								message: res.message,
								type: 'success',
								duration: 700
							});
							this.loading = false;
							this.$store.dispatch("socketInit", [res.data])
							this.$router.push("/")
						}).catch(err => {
							this.loading = false;
						})
					} else {
						console.log("参数验证不合法！");
						return false;
					}
				});
			}),
			handleRegister() {
				//跳转注册页面
				this.$router.push('reg')
			}
		}
	}
</script>

<style scoped>
	.loginPage {
		margin: auto;
		padding: 0;
		height: 97vh;
		width: 100%;
		min-width: 750rpx;
		position: relative;
	}

	.Obscuration {
		width: 90%;
		height: 90%;
		min-width: 750rpx;
		background-color: #89CFF3;
		filter: blur(20px);
		position: absolute;
		left: 5%;
		top: 5%;
	}

	.container {
		width: 50%;
		/* height: 50vh; */
		min-width: 20rem;
		margin: auto;
		position: relative;
		top: 25%;
		background: linear-gradient(#CDF5FD, #A0E9FF, #89CFF3, #00A9FF);
		border-radius: 12px;
		border: 1px solid #fff;
	}

	.title {
		margin-top: 10px;
	}

	.color-main {
		color: #000;
	}

	.login-right {
		font-size: 12px;
		color: #818181;
	}

	.reg-hint {
		position: absolute;
		cursor: pointer;
		height: 30px;
		line-height: 30px;
		font-size: 10px;
		color: #00A9FF;
		right: 2px;
	}

	.reg-hint-item {
		font-weight: bold;
		margin-left: 2px;
		color: #0000ff;
	}
</style>